<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>寒衣添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" id="product" lay-filter="component-form-group">
                <div class="layui-form-item">
                    <label class="layui-form-label">当前批次</label>
                    <div class="layui-input-block">
                        <select name="batchId" id="curBatch">
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">款式</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        <input type="radio" name="gender" value="M" title="男" checked="">
                        <input type="radio" name="gender" value="F" title="女">
                        <input type="radio" name="gender" value="MF" title="男女款">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">编码</label>
                    <div class="layui-input-block">
                        <input type="text" name="productNumber" required class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">规格</label>
                    <div id="skus">

                    </div>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="sku-add">添加规格</button>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">图片</label>
                    <div id="imgs" style="display: inline-flex;">
                    </div>
                    <button type="button" class="layui-btn" id="test1">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>

                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">尺码表</label>
                    <div class="layui-input-block">
                        <textarea name="description" class="layui-textarea" id="description" style="display: none;">
                        </textarea>
                    </div>
                </div>

                <div class="layui-form-item layui-layout-admin">
                    <div class="layui-input-block">
                        <div>
                            <button class="layui-btn" lay-submit="" lay-filter="product-save">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


<script src="/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'laydate', 'upload','layedit'], function () {
        var $ = layui.$
            , admin = layui.admin,
            layedit = layui.layedit
            , element = layui.element
            , layer = layui.layer
            , laydate = layui.laydate,
            upload = layui.upload
            , form = layui.form;
        //富文本编辑器配置图片上传接口，这个配置必须是在渲染之前
        //这个接口返回值必须严格匹配layui的标准
        layedit.set({	//设置图片接口
            uploadImage: {
                url: '/api/file/img', //接口url
                type: 'post'
            }
        });
        // 渲染富文本编辑器
      var index =  layedit.build('description', {
            tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right', 'image','face', 'link', 'unlink'],
            height: 200

        });
        //点击添加规格事件
        $("#sku-add").click(function () {
            //增加规格输入框
            //<div><input style="width: 10%;display: inline-block" type="text" class="layui-input" name="skus"><button>删除</button></div>
            var $new = $("<div><input style=\"width: 10%;display: inline-block\" type=\"text\" class=\"layui-input\" name=\"skus\"><button class='delete-sku'>删除</button></div>")
            $("#skus").append($new)
            deleteSku()
        })
        //点击删除规格
        function deleteSku(){
            $(".delete-sku").click(function () {
                $(this).parent().remove()
            })
        }
        //文件上传
        upload.render({
            elem: '#test1' //绑定元素
            ,url: '/api/file/upload/' //上传接口
            ,multiple: true
            ,number: 3
            ,done: function(res){
                //上传完毕回调
                var $div = $("<div><input type='hidden' name='imgs' value='"+res.url+"'/><input  type='hidden' name='names' value='"+res.name+"'><img style='display: inherit' height='200px' src='"+res.url+"'><button type='button' class='deleteImg'>删除</button></div>")
                $("#imgs").append($div)
                bindDeleteImg()
            }
            ,error: function(){
                //请求异常回调
            }
        });
        //点击删除图片按钮（不能直接在页面加载的时候绑定事件，需要在文件上传之后绑定）
        function bindDeleteImg(){
            $(".deleteImg").click(function () {
                $(this).parent().remove()
            })
        }
        //获取所有批次
        $.ajax({
            type: 'get',
            url: '/batchSetting/list?pageSize=-1',
            success: function (res) {
                $(res.data.records).each(function (index, item) {
                    var $option = $("<option value='" + item.id + "'>" + item.name + "</option>")
                    $("#curBatch").append($option)
                })
                $.ajax({
                    type: 'get',
                    url: '/batchSetting/curBatch',
                    success: function (res) {
                        if (res.data == null) {
                            layer.msg("不存在任何批次，请先设置批次")
                            return false
                        }
                        $("#curBatch").val(res.data.id)
                        form.render('select')
                    }
                })
            }
        })
        //绑定衣服提交
        form.on("submit(product-save)",function (obj) {

            var imgs = []
            $("input:hidden[name='imgs']").each(function (index, item) {
                imgs.push($(this).val())
            })
            obj.field.imgs = imgs
            var skus = []
            $("input[name='skus']").each(function (index, item) {
                skus.push($(this).val())
            })
            obj.field.skus = skus
            obj.field.description = layedit.getContent(index)
            console.info(obj.field)
            //图片是否有验证
            if(obj.field.imgs.length == 0){
                layer.msg("请至少上传一张图片",{icon: 6,time: 1500})
                return false
            }
            $.ajax({
                type: 'post',
                url: '/product/save',
                data: obj.field,
                success: function (res) {
                    if(res.data){
                        layer.msg("添加成功",{icon: 6,time: 1500},function () {
                            //跳转到寒衣列表
                            window.location = "/product/list"
                        })
                    }
                }
            })
            return false
        })
    });
</script>
</body>
</html>
